<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    class HelloMessage extends React.Component{

        constructor(props){
            super(props);
            this.state = {
                clickEvent:null,
                eventType:null
            };
        }

        shouldComponentUpdate(pre, next){
            console.log(pre);
            console.log(next);
        }

        onClick(event) {
            console.log(event); // => nullified object.
            console.log(event.type); // => "click"
//            const eventType = event.type; // => "click"
//
//            setTimeout(function() {
//                console.log(event.type); // => null
//                console.log(eventType); // => "click"
//            }, 0);
//
//            // Won't work. this.state.clickEvent will only contain null values.
//            this.setState({clickEvent: event});
//
//            // You can still export event properties.
//            this.setState({eventType: event.type});
        }

        render() {//复写方法
            return <button onClick={this.onClick}>Hello {this.props.name}</button>;
        }
    }
    ReactDOM.render(<HelloMessage name="world!"/>, document.getElementById("example"));

</script>
</body>
</html>

